﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BaiduMap.aspx.cs" Inherits="Study.VHProject新功能研究.BaiduMap" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
		body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		#allmap{width:100%;height:600px;}
		p{margin-left:5px; font-size:14px;}
	</style>
    <script src="../Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bWu6yM5fhHU8o3P3poChm4DAwXCqkPEc"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnSearch").click(function () {
                var point = new BMap.Point(112, 20); // 创建点坐标
                var marker = new BMap.Marker(point);
                var infoWindow = new BMap.InfoWindow("呵呵");  // 创建信息窗口对象
                map.addOverlay(marker);
                marker.addEventListener("mouseover", function () {
                    this.openInfoWindow(infoWindow);
                    //图片加载完毕重绘infowindow
                    document.getElementById('imgDemo').onload = function () {
                        infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
                    }
                });
            });
        });
    </script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="allmap"></div>

    <input type="text" />
    <input type="button" id="btnSearch" value="查询" />

    <div style='width:630px;height:250px;font-size: 12px;color: #333;'>
        <img style='width:160px;height:160px;' />
        <div style='display:inline-block;width:420px;height:160px; overflow:hidden;text-overflow:ellipsis;'>
            <p>工程数据标题</p>
            <p>阿海水电站为《金沙江中游河段水电规划报告》推荐的“一库八级”开发方案的第四个梯级。上游与梨园水电站相衔接，下游与金安桥水电站为邻，是金沙江水电基地重要的电源的之一。工程最大坝高130m，水库总库容8.82亿立方米，有效库容2.18亿立方米，具有日调节能力。电站总装机容量200万kw，多年平均发电量88.77亿kW·h，静态投资约136亿元。</p>
        </div>
        <a href="#" style='float:right; margin-right:20px;'>查看详情</a>
        <table style='width:100%;'>
            <tr>
                <td><span style='color: #808080;'>工程类型：</span><span>常规水电</span></td>
                <td><span style='color: #808080;'>所在流域：</span><span>金沙江</span></td>
                <td><span style='color: #808080;'>项目法人：</span><span>张三</span></td>
            </tr>
            <tr>
                <td><span style='color: #808080;'>工作文号：</span><span>常规水电</span></td>
                <td><span style='color: #808080;'>工程阶段：</span><span>金沙江</span></td>
                <td><span style='color: #808080;'>验收文号：</span><span>张三</span></td>
            </tr>
            <tr>
                <td><span style='color: #808080;'>设计单位：</span><span>常规水电</span></td>
                <td><span style='color: #808080;'>工程等别：</span><span>金沙江</span></td>
                <td><span style='color: #808080;'>项目核准：</span><span>张三</span></td>
            </tr>
            <tr>
                <td><span style='color: #808080;'>工程类型：</span><span>常规水电</span></td>
                <td><span style='color: #808080;'>所在流域：</span><span>金沙江</span></td>
                <td><span style='color: #808080;'>项目法人：</span><span>张三</span></td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var sContent =
	"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>纬衡浩建科技有限公司</h4>" +
	"<img style='float:right;margin:4px' id='imgDemo' src='../img/tianAnMen.jpg' width='139' height='104' title='纬衡浩建'/>" +
	"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>纬衡浩建科技有限公司坐落在广东省深圳市罗湖区落户高新技术产业园区第一区,120栋6楼...</p>" +
	"</div>";

    var cc = "<div style='width:600px;height:250px;font-size: 12px;color: #333;'>";
      cc=cc+ " <img style='width:160px;height:160px;' />"
      cc = cc + " <div style='display:inline-block;width:420px;height:160px; overflow:hidden;text-overflow:ellipsis;'>"
      cc = cc + " <p>工程数据标题</p>"
      cc = cc + "<p>阿海水电站为《金沙江中游河段水电规划报告》推荐的“一库八级”开发方案的第四个梯级。上游与梨园水电站相衔接，下游与金安桥水电站为邻，是金沙江水电基地重要的电源的之一。工程最大坝高130m，水库总库容8.82亿立方米，有效库容2.18亿立方米，具有日调节能力。电站总装机容量200万kw，多年平均发电量88.77亿kW·h，静态投资约136亿元。</p>"
      cc = cc + "</div>"
      cc = cc + "<a href='#' style='float:right; margin-right:20px;'>查看详情</a>"
      cc = cc + "<table style='width:100%;'>"
      cc = cc + "<tr>"
      cc = cc + "<td><span style='color: #808080;'>工程类型：</span><span>常规水电</span></td>"
      cc = cc + "<td><span style='color: #808080;'>所在流域：</span><span>金沙江</span></td>"
      cc = cc + "<td><span style='color: #808080;'>项目法人：</span><span>张三</span></td>"
      cc = cc + "</tr>"
      cc = cc + "<tr>"
      cc = cc + "<td><span style='color: #808080;'>工作文号：</span><span>常规水电</span></td>"
      cc = cc + "<td><span style='color: #808080;'>工程阶段：</span><span>金沙江</span></td>"
      cc = cc + "<td><span style='color: #808080;'>验收文号：</span><span>张三</span></td>"
      cc = cc + "</tr>"
      cc = cc + "<tr>"
      cc = cc + "<td><span style='color: #808080;'>设计单位：</span><span>常规水电</span></td>"
      cc = cc + "<td><span style='color: #808080;'>工程等别：</span><span>金沙江</span></td>"
      cc = cc + "<td><span style='color: #808080;'>项目核准：</span><span>张三</span></td>"
      cc = cc + "</tr>"
      cc = cc + "<tr>"
      cc = cc + "<td><span style='color: #808080;'>工程类型：</span><span>常规水电</span></td>"
      cc = cc + "<td><span style='color: #808080;'>所在流域：</span><span>金沙江</span></td>"
      cc = cc + "<td><span style='color: #808080;'>项目法人：</span><span>张三</span></td>"
      cc = cc + "</tr>"
      cc = cc + "</table>"
      cc = cc + "</div>";

    var map = new BMap.Map("allmap", { enableMapClick: false }); //构造底图时，关闭底图可点功能
    var point = new BMap.Point(116.1780802086, 39.5733239208); // 创建点坐标
    var marker = new BMap.Marker(point);
    var infoWindow = new BMap.InfoWindow(cc);  // 创建信息窗口对象
    map.centerAndZoom(point, 5); // 初始化地图,设置中心点
    map.addOverlay(marker);
    map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
    //map.setCurrentCity("北京");
    map.enableScrollWheelZoom(true); //启用滚轮放大缩小

    // 左上角，添加比例尺
    var top_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT });
    //左上角，添加默认缩放平移控件 
    var top_left_navigation = new BMap.NavigationControl();  
    map.addControl(top_left_control);
    map.addControl(top_left_navigation);

    // 添加定位控件
    var geolocationControl = new BMap.GeolocationControl();
    map.addControl(geolocationControl);

    var cr = new BMap.CopyrightControl({ anchor: BMAP_ANCHOR_TOP_RIGHT });   //设置版权控件位置
    map.addControl(cr); //添加版权控件
    var bs = map.getBounds();   //返回地图可视区域
    cr.addCopyright({ id: 1, content: "<a href='#' style='font-size:20px;margin-top:40px;display:inline-block; background:yellow'>我是自定义版权控件呀</a>", bounds: bs });
    //Copyright(id,content,bounds)类作为CopyrightControl.addCopyright()方法的参数

    var size = new BMap.Size(50, 50);
    map.addControl(new BMap.CityListControl({
    anchor: BMAP_ANCHOR_TOP_LEFT,
    offset: size,
    // 切换城市之间事件
    // onChangeBefore: function(){
    //    alert('before');
    // },
    // 切换城市之后事件
    // onChangeAfter:function(){
    //   alert('after');
    // }
}));

    /*
    marker.addEventListener("mouseover", function () {
        this.openInfoWindow(infoWindow);
        //图片加载完毕重绘infowindow
        document.getElementById('imgDemo').onload = function () {
            infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
        }
    });

    
    for (var i = 0; i < 10; i++) {
        var point = new BMap.Point(112+i, 20+i); // 创建点坐标
        var marker = new BMap.Marker(point);
        var infoWindow = new BMap.InfoWindow(cc);  // 创建信息窗口对象
        map.addOverlay(marker);
        marker.addEventListener("mouseover", function () {
            this.openInfoWindow(infoWindow);
            //图片加载完毕重绘infowindow
            document.getElementById('imgDemo').onload = function () {
                infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
            }
        });
    }
    */
    

    
</script>